<template>
  <a-layout class="min-h-screen">
    <!-- 侧边栏 -->
    <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible :width="260" class="shadow-lg">
      <div class="logo-container">
        <div class="logo-content" :class="{ 'collapsed': collapsed }">
          <div class="logo-icon">
            <bank-outlined class="text-2xl" />
          </div>
          <div class="logo-text">
            <h1 class="text-xl font-bold">AnyPay运营端</h1>
            <div class="logo-subtitle">聚合支付平台</div>
          </div>
        </div>
      </div>
      <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
        <a-menu-item key="dashboard">
          <template #icon>
            <dashboard-outlined />
          </template>
          <router-link to="/dashboard">首页</router-link>
        </a-menu-item>
        <a-sub-menu key="merchant-management">
          <template #icon>
            <team-outlined />
          </template>
          <template #title>商户管理</template>
          <a-menu-item key="miaoma-merchant-info-list">
            <template #icon>
              <team-outlined />
            </template>
            <router-link to="/merchant-management/miaoma-merchant-info-list">商户列表</router-link>
          </a-menu-item>
          <a-menu-item key="miaoma-service-provider-info-list">
            <template #icon>
              <cluster-outlined />
            </template>
            <router-link to="/merchant-management/miaoma-service-provider-info-list">服务商列表</router-link>
          </a-menu-item>
          <!-- <a-menu-item key="miaoma-merchant-store-list">
            <template #icon>
              <shop-outlined />
            </template>
            <router-link to="/merchant-management/miaoma-merchant-store-list">门店列表</router-link>
          </a-menu-item> -->
        </a-sub-menu>
        <a-sub-menu key="merchant-onboarding">
          <template #icon>
            <audit-outlined />
          </template>
          <template #title>开户管理</template>
          <a-menu-item key="pre-onboarding">
            <template #icon>
              <form-outlined />
            </template>
            <router-link to="/merchant-onboarding/pre-onboarding">预进件</router-link>
          </a-menu-item>
          <a-menu-item key="channel-onboarding">
            <template #icon>
              <cloud-upload-outlined />
            </template>
            <router-link to="/merchant-onboarding/channel-onboarding">渠道开户</router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="payment-config">
          <template #icon>
            <credit-card-outlined />
          </template>
          <template #title>支付配置</template>
          <a-menu-item key="payproductdict">
            <template #icon>
              <gold-outlined />
            </template>
            <router-link to="/payment-config/miaoma-payproductdict">支付产品</router-link>
          </a-menu-item>
          <a-menu-item key="paychanneldict">
            <template #icon>
              <gateway-outlined />
            </template>
            <router-link to="/payment-config/miaoma-paychanneldict">支付渠道</router-link>
          </a-menu-item>
          <a-menu-item key="paymentappconfig">
            <template #icon>
              <calculator-outlined />
            </template>
            <router-link to="/payment-config/miaoma-paymentappconfig">支付应用</router-link>
          </a-menu-item>
          <a-menu-item key="qrcode">
            <template #icon>
              <qrcode-outlined />
            </template>
            <router-link to="/payment-config/miaoma-paydeviceqrcode">聚合码牌</router-link>
          </a-menu-item>
          <!-- <a-menu-item key="suantaiqrcode">
            <template #icon>
              <qrcode-outlined />
            </template>
            <router-link to="/payment-config/miaoma-suantaiqrcode">活码管理</router-link>
          </a-menu-item> -->
          <a-menu-item key="printer">
            <template #icon>
              <qrcode-outlined />
            </template>
            <router-link to="/payment-config/miaoma-paydeviceprinter">云打印机</router-link>
          </a-menu-item>
          <a-menu-item key="speaker">
            <template #icon>
              <qrcode-outlined />
            </template>
            <router-link to="/payment-config/miaoma-paydevicespeaker">云喇叭列表</router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="order-management">
          <template #icon>
            <file-text-outlined />
          </template>
          <template #title>订单管理</template>
          <a-menu-item key="miaoma-pay-order">
            <template #icon>
              <file-text-outlined />
            </template>
            <router-link to="/order-management/miaoma-pay-order">支付订单</router-link>
          </a-menu-item>
          <a-menu-item key="miaoma-refund-order">
            <template #icon>
              <file-text-outlined />
            </template>
            <router-link to="/order-management/miaoma-refund-order">退款订单</router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="transaction-notifications">
          <template #icon>
            <send-outlined />
          </template>
          <template #title>交易通知</template>
          <a-menu-item key="channel-notifications">
            <template #icon>
              <cloud-outlined />
            </template>
            <router-link to="/transaction-notifications/channel">渠道通知</router-link>
          </a-menu-item>
          <a-menu-item key="merchant-callbacks">
            <template #icon>
              <link-outlined />
            </template>
            <router-link to="/transaction-notifications/merchant">商户回调</router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="reconciliation">
          <template #icon>
            <calculator-outlined />
          </template>
          <template #title>对账管理</template>
          <a-menu-item key="channel-reconciliation">
            <template #icon>
              <swap-outlined />
            </template>
            <router-link to="/reconciliation/channel">渠道对账</router-link>
          </a-menu-item>
          <a-menu-item key="merchant-reconciliation">
            <template #icon>
              <account-book-outlined />
            </template>
            <router-link to="/reconciliation/merchant">商户对账</router-link>
          </a-menu-item>
          <a-menu-item key="error-handling">
            <template #icon>
              <warning-outlined />
            </template>
            <router-link to="/reconciliation/error-handling">差错处理</router-link>
          </a-menu-item>
          <a-menu-item key="reconciliation-files">
            <template #icon>
              <file-zip-outlined />
            </template>
            <router-link to="/reconciliation/files">对账文件</router-link>
          </a-menu-item>
          <a-menu-item key="settlement">
            <template #icon>
              <money-collect-outlined />
            </template>
            <router-link to="/reconciliation/settlement">结算管理</router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="data-statistics">
          <template #icon>
            <bar-chart-outlined />
          </template>
          <template #title>数据统计</template>
          <a-menu-item key="transaction-statistics">
            <template #icon>
              <line-chart-outlined />
            </template>
            <router-link to="/data-statistics/transaction">交易统计</router-link>
          </a-menu-item>
          <a-menu-item key="merchant-statistics">
            <template #icon>
              <pie-chart-outlined />
            </template>
            <router-link to="/data-statistics/merchant">商户统计</router-link>
          </a-menu-item>
          <a-menu-item key="channel-statistics">
            <template #icon>
              <fund-outlined />
            </template>
            <router-link to="/data-statistics/channel">渠道统计</router-link>
          </a-menu-item>
          <a-menu-item key="revenue-statistics">
            <template #icon>
              <dollar-outlined />
            </template>
            <router-link to="/data-statistics/revenue">收入统计</router-link>
          </a-menu-item>
          <a-menu-item key="trend-analysis">
            <template #icon>
              <stock-outlined />
            </template>
            <router-link to="/data-statistics/trend">趋势分析</router-link>
          </a-menu-item>
          <a-menu-item key="realtime-monitor">
            <template #icon>
              <monitor-outlined />
            </template>
            <router-link to="/data-statistics/realtime">实时监控</router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="system-settings">
          <template #icon>
            <setting-outlined />
          </template>
          <template #title>系统设置</template>
          <a-menu-item key="protocol-config">
            <template #icon>
              <dashboard-outlined />
            </template>
            <router-link to="/system-settings/protocol-config">协议配置</router-link>
          </a-menu-item>
          <a-menu-item key="channel-protocol-mapping">
            <template #icon>
              <link-outlined />
            </template>
            <router-link to="/development-test/channel-protocol-mapping">渠道协议关联</router-link>
          </a-menu-item>
          <a-menu-item key="unified-channel-config">
            <template #icon>
              <cluster-outlined />
            </template>
            <router-link to="/system-settings/unified-channel-config">渠道配置</router-link>
          </a-menu-item>
          <a-menu-item key="config-overview">
            <template #icon>
              <dashboard-outlined />
            </template>
            <router-link to="/system-settings/overview">配置概览</router-link>
          </a-menu-item>
          <a-menu-item key="basic-settings">
            <template #icon>
              <setting-outlined />
            </template>
            <router-link to="/system-settings/basic">基本设置</router-link>
          </a-menu-item>
          <a-menu-item key="development-settings">
            <template #icon>
              <experiment-outlined />
            </template>
            <router-link to="/system-settings/development">开发设置</router-link>
          </a-menu-item>
          <a-menu-item key="security-settings">
            <template #icon>
              <safety-outlined />
            </template>
            <router-link to="/system-settings/security">安全设置</router-link>
          </a-menu-item>
          <a-menu-item key="third-party-config">
            <template #icon>
              <cloud-server-outlined />
            </template>
            <router-link to="/system-settings/third-party">第三方配置</router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="dev-test" v-if="showDevMenus && menuToggles.devTest">
          <template #icon>
            <experiment-outlined />
          </template>
          <template #title>开发测试</template>

          <a-menu-item key="static-pay-code-test">
            <template #icon>
              <qrcode-outlined />
            </template>
            <router-link to="/development-test/static-pay-code-test">静态聚合码牌测试</router-link>
          </a-menu-item>
          <a-menu-item key="dynamic-pay-code-test">
            <template #icon>
              <qrcode-outlined />
            </template>
            <router-link to="/development-test/dynamic-pay-code-test">动态聚合码牌测试</router-link>
          </a-menu-item>
          <a-menu-item key="pay-test">
            <template #icon>
              <wallet-outlined />
            </template>
            <router-link to="/development-test/pay-test">支付测试</router-link>
          </a-menu-item>
          <a-menu-item key="test-api">
            <template #icon>
              <api-outlined />
            </template>
            <router-link to="/development-test/test-api">API测试</router-link>
          </a-menu-item>
          <a-menu-item key="payment-channel-info">
            <template #icon>
              <gateway-outlined />
            </template>
            <router-link to="/development-test/payment-channel-info">支付渠道信息</router-link>
          </a-menu-item>
          <a-menu-item key="grade-protection">
            <template #icon>
              <safety-outlined />
            </template>
            <router-link to="/development-test/grade-protection">等级保护</router-link>
          </a-menu-item>
          <a-menu-item key="chen-study">
            <template #icon>
              <book-outlined />
            </template>
            <router-link to="/development-test/chen-study">学习</router-link>
          </a-menu-item>
          <!-- 新增测试工具 -->
          <a-menu-item key="api-test-suite">
            <template #icon>
              <api-outlined />
            </template>
            <router-link to="/development-test/api-test-suite">🔧 API测试套件</router-link>
          </a-menu-item>
          <a-menu-item key="data-management-test">
            <template #icon>
              <database-outlined />
            </template>
            <router-link to="/development-test/data-management-test">📊 数据管理测试</router-link>
          </a-menu-item>
          <a-menu-item key="system-tools-test">
            <template #icon>
              <tool-outlined />
            </template>
            <router-link to="/development-test/system-tools-test">🔧 系统工具测试</router-link>
          </a-menu-item>
          <a-sub-menu key="frontend-components">
            <template #icon>
              <appstore-outlined />
            </template>
            <template #title>前端组件</template>
            <a-menu-item key="components-overview">
              <template #icon>
                <dashboard-outlined />
              </template>
              <router-link to="/frontend-components">前端组件概览</router-link>
            </a-menu-item>
            <a-menu-item key="file-upload-demo">
              <template #icon>
                <upload-outlined />
              </template>
              <router-link to="/frontend-components/file-upload-demo">文件上传组件</router-link>
            </a-menu-item>
            <a-menu-item key="data-display-demo">
              <template #icon>
                <table-outlined />
              </template>
              <router-link to="/frontend-components/data-display-demo">数据展示组件</router-link>
            </a-menu-item>
            <a-menu-item key="form-demo">
              <template #icon>
                <form-outlined />
              </template>
              <router-link to="/frontend-components/form-demo">表单组件</router-link>
            </a-menu-item>
            <a-menu-item key="interaction-demo">
              <template #icon>
                <interaction-outlined />
              </template>
              <router-link to="/frontend-components/interaction-demo">交互组件</router-link>
            </a-menu-item>
          </a-sub-menu>
          <a-menu-item key="article">
            <template #icon>
              <file-text-outlined />
            </template>
            <router-link to="/development-test/article">文章管理-即将删除</router-link>
          </a-menu-item>
          <a-menu-item key="payment-context-display">
            <template #icon>
              <eye-outlined />
            </template>
            <router-link to="/development-test/payment-context-display">支付上下文展示-即将删除</router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="story-driven" v-if="showDevMenus && menuToggles.storyDriven">
          <template #icon>
            <rocket-outlined />
          </template>
          <template #title>故事驱动</template>
          <a-menu-item key="product-management">
            <template #icon>
              <gold-outlined />
            </template>
            <router-link to="/development-test/product-management">支付产品管理-故事驱动</router-link>
          </a-menu-item>
          <a-menu-item key="channel-management">
            <template #icon>
              <gateway-outlined />
            </template>
            <router-link to="/development-test/channel-management">支付渠道管理-故事驱动</router-link>
          </a-menu-item>
          <a-menu-item key="service-provider-management">
            <template #icon>
              <cluster-outlined />
            </template>
            <router-link to="/development-test/service-provider-management">服务商管理-故事驱动</router-link>
          </a-menu-item>
          <a-menu-item key="merchant-management-new">
            <template #icon>
              <team-outlined />
            </template>
            <router-link to="/development-test/merchant-management">商户管理-故事驱动</router-link>
          </a-menu-item>
          <a-menu-item key="qrcode-management">
            <template #icon>
              <qrcode-outlined />
            </template>
            <router-link to="/development-test/qrcode-management">聚合码牌管理-故事驱动</router-link>
          </a-menu-item>
          <a-menu-item key="protocol3-management">
            <template #icon>
              <experiment-outlined />
            </template>
            <router-link to="/development-test/protocol3-management">协议管理-故事驱动</router-link>
          </a-menu-item>
          <a-menu-item key="appconfig-management">
            <template #icon>
              <cluster-outlined />
            </template>
            <router-link to="/development-test/appconfig-management">商户应用管理-故事驱动</router-link>
          </a-menu-item>
          <a-menu-item key="user-payment-test">
            <template #icon>
              <user-outlined />
            </template>
            <router-link to="/development-test/user-payment-test">支付测试工具-故事驱动</router-link>
          </a-menu-item>
        </a-sub-menu>

        <!-- 动态菜单组件 -->
        <DynamicMenu v-if="showDevMenus && menuToggles.miaomaTest" />
      </a-menu>

      <!-- 版本号和版权信息 -->
      <div class="footer-info">
        <div class="version-info">
          <span class="text-gray-400 text-xs">v0.0.1</span>
        </div>
      </div>
    </a-layout-sider>

    <a-layout>
      <!-- 顶部导航栏 -->
      <a-layout-header class="bg-white px-6 flex items-center justify-between">
        <menu-unfold-outlined v-if="collapsed" class="trigger text-lg" @click="() => (collapsed = !collapsed)" />
        <menu-fold-outlined v-else class="trigger text-lg" @click="() => (collapsed = !collapsed)" />
        <div class="flex items-center">
          <a-dropdown>
            <a class="ant-dropdown-link" @click.prevent>
              <user-outlined class="mr-2" />
              admin
              <down-outlined />
            </a>
            <template #overlay>
              <a-menu>
                <a-menu-item key="profile">
                  <router-link to="/profile">
                    <user-outlined />
                    个人信息
                  </router-link>
                </a-menu-item>
                <a-menu-item key="logout" @click="handleLogout">
                  <logout-outlined />
                  退出登录
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </a-layout-header>

      <!-- 主要内容区域 -->
      <a-layout-content class="m-6 p-6 bg-white">
        <router-view></router-view>
      </a-layout-content>

      <!-- 右侧 Footer -->
      <a-layout-footer class="text-center bg-white">
        <span class="text-gray-400 text-xs">Copyright © 2025 AnyPay</span>
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import DynamicMenu from '@/miaoma/DynamicMenu.vue'
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  DashboardOutlined,
  TeamOutlined,
  CreditCardOutlined,
  QrcodeOutlined,
  SettingOutlined,
  UserOutlined,
  DownOutlined,
  LogoutOutlined,
  BankOutlined,
  WalletOutlined,
  ApiOutlined,
  AppstoreOutlined,
  FileTextOutlined,
  UploadOutlined,
  TableOutlined,
  FormOutlined,
  InteractionOutlined,
  ExperimentOutlined,
  SendOutlined,
  CloudOutlined,
  LinkOutlined,
  AuditOutlined,
  CloudUploadOutlined,
  CalculatorOutlined,
  AccountBookOutlined,
  WarningOutlined,
  FileZipOutlined,
  MoneyCollectOutlined,
  BarChartOutlined,
  LineChartOutlined,
  PieChartOutlined,
  DollarOutlined,
  StockOutlined,
  MonitorOutlined,
  SwapOutlined,
  FundOutlined,
  SafetyOutlined,
  CloudServerOutlined,
  GoldOutlined,
  GatewayOutlined,
  ClusterOutlined,
  EyeOutlined,
  DatabaseOutlined,
  ToolOutlined,
  BookOutlined,
  RocketOutlined,
} from '@ant-design/icons-vue'

import { useDevMenus } from '@/composables/useDevMenus'

const router = useRouter()
const collapsed = ref(false)
const selectedKeys = ref(['dashboard'])

// 使用全局开发菜单状态
const { showDevMenus, menuToggles } = useDevMenus()

// 监听路由变化，自动设置选中的菜单项
router.afterEach((to) => {
  // 根据当前路由设置选中的菜单项
  if (to.path.includes('/dashboard')) {
    selectedKeys.value = ['dashboard']
  } else if (to.path.includes('/system-settings/development')) {
    selectedKeys.value = ['development-settings']
  } else if (to.path.includes('/system-settings')) {
    // 提取系统设置子路径
    const subPath = to.path.split('/system-settings/')[1]
    if (subPath) {
      selectedKeys.value = [subPath.replace('/', '-') + '-settings']
    } else {
      selectedKeys.value = ['system-settings']
    }
  } else if (to.path.includes('/development-test')) {
    // 开发测试菜单项
    const subPath = to.path.split('/development-test/')[1]
    if (subPath) {
      selectedKeys.value = [subPath]
    }
  } else if (to.path.includes('/story-driven')) {
    // 故事驱动菜单项
    const subPath = to.path.split('/story-driven/')[1]
    if (subPath) {
      selectedKeys.value = [subPath]
    }
  }
})

const handleLogout = () => {
  message.success('退出成功')
  router.push('/auth/login')
}
</script>

<style scoped>
.trigger {
  cursor: pointer;
  transition: color 0.3s;
}

.trigger:hover {
  color: var(--primary-color);
}

.ant-layout-header {
  height: 64px;
  line-height: 64px;
  padding: 0 24px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.ant-layout-sider {
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.ant-layout-content {
  min-height: 280px;
  border-radius: 8px;
}

.footer-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.version-info {
  text-align: center;
  margin-bottom: 8px;
}

.logo-container {
  height: 64px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(135deg, rgba(24, 144, 255, 0.1) 0%, rgba(24, 144, 255, 0.05) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-content {
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s;
}

.logo-content.collapsed {
  justify-content: center;
}

.logo-content.collapsed .logo-text {
  display: none;
}

.logo-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-color);
  border-radius: 8px;
  color: white;
}

.logo-text {
  display: flex;
  flex-direction: column;
}

.logo-text h1 {
  line-height: 1.2;
  margin: 0;
  background: linear-gradient(90deg, var(--primary-color) 0%, #40a9ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo-subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.2;
}

.ant-layout-footer {
  padding: 16px;
  border-top: 1px solid #f0f0f0;
}
</style>